<template>
  <!-- 选择组织 -->
  <div class="orgStructure-page">
    <!-- <Form
      :model="formOrg"
      ref="deptForm"
      :label-width="80"
      class="orgsearch"
      style="margin-top:-10px;"
      @submit.native.prevent
    >
      <Input
        search
        :placeholder="$t('module.userManage.placeholder.enterDepartmant')"
        v-model.trim="formOrg.nameOrCode"
        @on-enter="search"
      />
    </Form>
    <div class="tree-container">
      <Spin fix v-show="loading"></Spin>
      <el-tree
        :data="baseData"
        ref="tree"
        :props="treeProps"
        @node-click="selectOrg"
        highlight-current
        node-key="orgId"
        :expand-on-click-node="false"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <div>
            <embed
              :src="embedSvg(data.orgType)"
              width="10"
              height="10"
              type="image/svg+xml"
              v-if="embedSvg(data.orgType)"
              class="node-svg"
            />
            <span class="node-label">{{ node.label }}</span>
          </div>
        </span>
      </el-tree>
    </div>-->
    <user-organization
      :query="query"
      @handleOnNodeClick="handleOnNodeClick"
      @selsectOrg="selsectOrg"
    ></user-organization>
  </div>
</template>

<script>
import UserOrganization from "@/components/common/UserOrganization.vue";
import locales from "./locales.js";
import userManageAPI from "@/api/userManageApi";
import { CoreModuleName } from "@/const";

export default {
  mixins: [locales],
  components: { UserOrganization },
  props: {},
  data() {
    return {
      query: {
        orgPath: "",
        orgTypeFilter: 3,
        enabled: ""
      },
      currentUserInfo: {}, //当前登录用户信息
      formOrg: {
        nameOrCode: "",
        id: ""
      },
      organization: {},
      baseData: [],
      treeProps: {
        label: "orgName",
        children: "childrenDept"
      },
      // 根据orgType设置相应svg地址("\"是转义字符,需用"\\"代替，否则"\"无法解析为\)
      embedSvg: orgType => {
        let svgUrl;
        switch (+orgType) {
          case 1:
            svgUrl = "static\\images\\enterprise.svg";
            break;
          case 2:
            svgUrl = "static\\images\\company.svg";
            break;
          case 10:
            svgUrl = "static\\images\\department.svg";
            break;
          default:
            svgUrl = "";
        }
        return svgUrl;
      },
      actions: [
        {
          text: this.$t("common.save"),
          theme: "primary",
          handle: () => {
            this.$emit("Close", this.organization);
          }
        },
        {
          text: this.$t("common.close"),
          handle: () => {
            this.$emit("Close");
          }
        }
      ],
      loading: false
    };
  },
  created() {
    // 当前登录用户
    const RIPPLES = "ripples";
    this.currentUserInfo = $store.state[CoreModuleName].userInfo;
    this.formOrg.id = this.currentUserInfo.id;

    this.init();
  },
  methods: {
    handleOnNodeClick(data) {
      this.organization = data;
    },
    selsectOrg(data) {
      this.organization = data;
    },
    init() {
      this.$emit("SetTitle", this.$t("module.userManage.organization"));
      this.$emit("SetPageWidth", 734);
      this.$emit("SetPageActions", this.actions);
    }
  }
};
</script>

<style lang="less" scoped>
.orgStructure-page {
  .el-tree {
    width: 100%;
  }
  .ivu-row {
    .ivu-col {
      min-width: auto;
      .orgsearch {
        line-height: 48px;
      }
    }
  }
}
.tree-container {
  position: relative;
  height: 100%;
}
</style>